import React, { Children, useState } from "react";

import type { MenuProps } from "antd";
import { useNavigate } from "react-router-dom";
import { Menu } from "antd";
//store
import { useDispatch, useSelector } from 'react-redux';
import { getmenu  } from  '../../store/modules/module'
import "./menus.scss";
export default function Menus() {
  const navigata = useNavigate();
  const dispatch = useDispatch()
  const [menulist, setMenuList] = useState<any>(JSON.parse(sessionStorage.getItem("menu") as string) || []);
  type MenuItem = Required<MenuProps>["items"][number];
  const items: MenuItem[] = menulist.map((item: any, index: number) => {
    return {
      key: item.label,
      label: item.label,
      path: item.path,
      children:
        item.children &&
        item.children.map((child: any) => {
          return {
            key: child.label+child.path,
            label: child.label,
            path: child.path,
            children:
              child.children &&
              child.children.map((grandchild: any) => {
                return {
                  key: grandchild.path,
                  label: grandchild.label,
                  path: grandchild.path,
                  children:
                    grandchild.children &&
                    grandchild.children.map((greatgrandchild: any) => {
                      return {
                        key: greatgrandchild.path,
                        label: greatgrandchild.label,
                        path: greatgrandchild.path,
                      };
                    }),
                };
              }),
          };
        }),
    };
  });
  const onClick: MenuProps["onClick"] = (e:any) => {
    console.log("click ", e);
  dispatch(getmenu(e))
    navigata(e.key);
  };

  return (
    <div>
      <Menu
        onClick={onClick}
        style={{
          width: 240,
          height: "91vh",
          borderRight: 0,
          overflowY: "auto",
        }}
        defaultSelectedKeys={["1"]} //默认选中
        defaultOpenKeys={["sub1"]}
        mode="inline"
        items={items}
      />
    </div>
  );
}
